<template>
    <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
    <t-table row-key="index" :data="data" :columns="columns" :stripe="stripe" :bordered="bordered" :hover="hover"
        :table-layout="tableLayout ? 'auto' : 'fixed'" :size="size" :show-header="showHeader" cell-empty-content="-"
        resizable lazy-load>
        <template #index="{ rowIndex }">{{ rowIndex + 1 }}</template>

        <template #image="{ row }">
            <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image">
                        <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                        <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                            <span>
                                <BrowseIcon size="1.4em" /> 预览
                            </span>
                        </div>
                    </div>
                </template>
            </t-image-viewer>
        </template>

        <template #status="{ row }">
            <t-tag theme="default"  v-if="row.status == 1">启用</t-tag>
            <t-tag theme="default"  v-else>禁用</t-tag>
        </template>
        <!-- 操作栏 -->
        <template #op="{ row }">
            <div class="operateCon">
                <t-link class="btn-dl" @click="openOperateDialog(row)" :disabled="row.count"  >删除</t-link>
                <t-link class="font-bt" @click="openEditDialog(row)" :disabled="row.count"  >编辑</t-link>
                <t-link class="font-bt" v-if="row.status == 1" @click="forbidden(row)"  :disabled="row.count">禁用</t-link>
                <t-link class="font-bt" v-else @click="enable(row)"  :disabled="row.count">启用</t-link>
            </div>
        </template>

    </t-table>
    <t-pagination v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize" :total="total"
        @page-size-change="onPageSizeChange" @current-change="onCurrentChange" />

</template>

<script setup lang="jsx">
import { ref } from 'vue';
import { BrowseIcon } from 'tdesign-icons-vue-next';

const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return [];
        }
    },
    pagination: {
        type: Object,
        default: () => {
            return {
                pageNum: 1,
                pageSize: 10
            };
        }
    },
    total: {
        type: Number,
        default: () => {
            return 0;
        }
    }
})

//声明父组件传递过来的方法
const emit = defineEmits(['pageSizeChange', 'pageNumChange', 'openEditDialog', 'openOperateDialog', 'enable', 'forbidden'])

const columns = ref([
    { colKey: 'index', title: '序号', width: '80' },
    { colKey: 'image', title: '护理图片', },
    { colKey: 'name', title: '护理项目名称', width: '140' },
    { colKey: 'price', title: '价格（元）' },
    { colKey: 'unit', title: '单位' },
    { colKey: 'orderNo', title: '排序' },
    { colKey: 'creator', title: '创建人' },
    { colKey: 'createTime', title: '创建时间', width: '180' },
    { colKey: 'status', title: '状态' },
    { colKey: 'op', title: '操作', width: '180', fixed: 'right' },
]);


const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);

const onPageSizeChange = () => {
    emit('pageSizeChange');
}

const onCurrentChange = () => {
    emit('pageNumChange');
}


const openEditDialog = (row) => {
    emit('openEditDialog', row);
}

const openOperateDialog = (row) => {
    emit('openOperateDialog', row);
}

const enable = (row) => {
    emit('enable', row);
}

const forbidden = (row) => {
    emit('forbidden', row);
}
</script>